

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getStorage,delStorage } from "@/utils/localStorage.js";
import MessageView from "@/views/message/MessageView.vue";
const route = useRoute();
const messageId = ref('');
const sender = ref('');
const receiver = ref('');
const content = ref('');
const contentType = ref('');
const sentTime = ref('');

const getParams = () =>{
  let messageData = JSON.parse(getStorage(("messageViewData")));
  console.log(messageData);
  delStorage("messageViewData");
  messageId.value = messageData.messageId|| '未提供ID';

  sender.value = messageData.sender ? messageData.sender.username : '未知发送者';
  receiver.value = messageData.receiver ? messageData.receiver.username : '未知接收者';
  content.value = messageData.message ? messageData.message.content : '无内容';
  contentType.value = messageData.message ? messageData.message.contentType : '未知类型';
  sentTime.value = messageData.message ? messageData.message.sentTime : '未知时间';

}
onMounted(() => {
// 基础逻辑判断，确保所有数据都有正确的值
  getParams();
});

</script>


<template>
  <div class="bodymax">
    <div>
      <!-- 第一个部分的内容 -->
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td :colspan="2">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td :colspan="2"><img src="@/assets/Message/list/board_title.gif" alt="Board Title" width="115" height="30"></td>
              </tr>
              <tr>
                <td width="20">&nbsp;</td>
                <td><img src="@/assets/Message/read/board_title_copy.gif" alt="Board Title Copy" width="267" height="15"></td>
              </tr>
              <tr>
                <td width="10">&nbsp;</td>
                <td>
                  <img src="@/assets/Message/read/board_title_image.gif" alt="Board Title Image" width="180" height="84">
                  <img src="@/assets/Message/read/board_title_top_copy.gif" alt="Board Title Top Copy" width="376" height="66">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

      <!-- 第二个部分的内容 -->
      <div class="body1">

        <table class="custom-table" >
          <tr><td colspan="5" class="separator"></td></tr>
          <tr class="header-bg"><td colspan="5"></td></tr>
          <tr class="read-header" style="color: black ;display: flex" >
            <td style="flex: 1;text-align: center;vertical-align: center"><img src="@/assets/Message/list/senId.png" width="50" height="15"></td>
            <td style="flex: 3 ;text-align: center;vertical-align: center"><span>{{sender}}</span></td>
            <td style="flex: 1;text-align: center;vertical-align: center"><img src="@/assets/Message/list/recent.png" width="50" height="15"></td>
            <td style="flex: 3;text-align: center;vertical-align: center"><span>{{receiver}}</span></td>
          </tr>
          <tr class="header-bg"><td colspan="5"></td></tr>
        </table>


        <table class="custom-table">
          <tr class="board-title" style="display: flex">
            <td style="flex: 1;text-align: center;vertical-align: center" ><img src="@/assets/Message/list/type.png" width="50" height="15" alt="Message Type"></td>
            <td  style="flex: 1;text-align: center;vertical-align: center"><img src="@/assets/Message/write/arrow.gif" alt="Arrow"><span>文本类型（等待接口修改）</span></td>
            <td style="flex: 1;text-align: center;vertical-align: center"> <img src="@/assets/Message/list/recent.png" width="50" height="15" alt="time"></td>
            <td style="flex: 1;text-align: center;vertical-align: center"><img src="@/assets/Message/read/down_image.gif" alt="Down Image"><span>时间（等接口）</span></td>
          </tr>
        </table>

        <table class="custom-table">
          <tr><td class="dotted-line"></td></tr>
        </table>


        <table class="custom-table">
          <tr class="name-row">
            <td><img src="@/assets/Message/list/message1.png" width="60" height="15" alt="Message"></td>
            <td><img src="@/assets/Message/write/arrow.gif" alt="Arrow">
              <span class="spantext">
                <p><strong>Message ID:</strong> {{ messageId }}</p>
    <p><strong>Sender:</strong> {{ sender }}</p>
    <p><strong>Receiver:</strong> {{ receiver }}</p>
    <p><strong>Content:</strong> {{ content }}</p>

              </span>
            </td>
          </tr>
          <tr class="dotted-line"><td colspan="2"></td></tr>
        </table>


        <table class="custom-table">
          <tr class="dotted-line"><td colspan="5"></td></tr>
          <tr>
            <td></td>
            <td colspan="4">111111</td>
          </tr>
          <tr class="footer-bg"><td colspan="5"></td></tr>
        </table>
      </div>

      <!-- 第三个部分的内容 -->
      <div>
        <table>
          <tr>
            <td width="13%">
              <div align="right">
                <img src="@/assets/Message/read/vitamind_mark.gif" width="69" height="53"  alt=""/>
              </div>
            </td>
            <td>
              <span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="@/assets/Message/read/height_line.gif" width="5" height="53"  alt=""/>&nbsp;<img src="@/assets/Message/list/e_mail.gif" width="251" height="27"  alt=""/></span>
            </td>
          </tr>
        </table>
      </div>
    </div>
<!--    动态生成-->
    <table class="custom-table">
      <tr>
        <th>Title</th>
        <th>Description</th>
      </tr>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.title }}</td>
        <td>{{ item.description }}</td>
      </tr>
    </table>
  </div>
</template>



<style>



/* If you want to specifically target the background of the component */
.body1 {
  background-color: #f8f8f8;
}
.bodymax{
  background-color: #f8f8f8;
}
.custom-table {
  width: 100%;
  border: 0;
  border-spacing: 3px;
  border-collapse: separate;

}

.custom-table td, .custom-table th {
  padding: 0;
}

.custom-table img {
  vertical-align: middle;
}
.board-title{
  color:black;
}
.separator {
  height: 1px;
}

.header-bg {
  height: 26px;
  background-color: #CCCCCC;
}

.spantext p{
  color :black;
  font-size: 15px;
align-content: center;
}

.read-header td {
  height: 26px;
}

.read-header td:last-child {
  font-size: small;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.board-title td:first-child, .name-row td:first-child {
  text-align: center;
}

.dotted-line {
  background-image: url("@/assets/Message/list/dotted_line.gif");
  background-repeat: repeat-x;
  width: 10%;
  height: 1px;
}

.name-row td {
  text-align: center;
}

.footer-bg {
  background-color: #999999;
  height: 3px;
}

span {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: small;
}
</style>
